<!doctype html>
<html>
    <head>
        <title>basic animation</title>
        <style>
            div{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100px;
                height: 100px;
                border: 10px solid black;
                background-color: red;
                text-decoration: none;
                -ms-animation: fouredges 5s linear 2s infinite alternate;
                -webkit-animation: fouredges 5s linear 2s infinite alternate;
                animation: fouredges 5s linear 2s infinite alternate;
            }
            @-ms-keyframes fouredges{
                0% { top: 0px; left: 0px;}
                25% { top: 0px; left: 100px;}
                50% { top: 100px; left: 100px;}
                75% { top: 100px; left: 0px;}
                100% { top: 0px; left: 0px;}
            }
            @-webkit-keyframes fouredges{
                0% { top: 0px; left: 0px;}
                25% { top: 0px; left: 100px;}
                50% { top: 100px; left: 100px;}
                75% { top: 100px; left: 0px;}
                100% { top: 0px; left: 0px;}
            }
            @keyframes fouredges{
                0% { top: 0px; left: 0px;}
                25% { top: 0px; left: 100px;}
                50% { top: 100px; left: 100px;}
                75% { top: 100px; left: 0px;}
                100% { top: 0px; left: 0px;}
            }
        </style>
        
    </head>
    <body>
        <div></div>
    </body>
</html>